﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        h2 {
            color: red;
        }
        #positonByRelative {
            border: 1px solid black;
            position:relative;
            top: 100px;
            left : 100px;
            background-color:blue;
        }

        #positonByAbsolute {
            border: 1px solid black;
            position : absolute;
            top: 0px;
            left: 0px;
            background-color : blue;
        }

        #Float_notion div {
            border: 1px solid red;
            width: 200px;
            height: 50px;
            margin: 10px;
        }
        #notion_div1 {
            float: right;
        }




        #clear_div1 {
            float: left;
        }
        #clear_p2 {
            clear:both;
        }
    </style>
</head>
<body>
    <div id="relative" style="border: 1px solid blue">
        <h2>相对定位：相对于这个框在普通文档流中的位置</h2>
        <div id="positonByRelative">
            使用相对定位，相对于普通文档流向下和向右偏移100个像素
        </div>
        <p style="color:red">普通文档流中的段落,相对定位的框会覆盖普通文档流中的框</p>
        <p>普通文档流中的段落</p>
        <p>普通文档流中的段落</p>
    </div>

    <div id="absolutely" style="border: 1px solid blue; margin-top:10px; position: relative">
        <h2>绝对定位，普通文档流中消失,相对于最先定位的祖先</h2>
        <div id="positonByAbsolute">
            使用绝对定位，相对于最先定位的祖先元素向下和向右偏移0个像素
        </div>
    </div>

    <div id="Float_notion" style="border: 1px solid blue; margin-top:10px; position: relative">
        <h2>浮动定位-概念:普通文档流中消失， 向左或者向右浮动</h2>
        <div id="notion_div1">框1</div>
        <div id="notion_div2">框2</div>
        <div id="notion_div3">框3</div>
    </div>


    <div id="Float_clear" style="border: 1px solid blue; margin-top:10px; position: relative">
        <h2>浮动定位<br />不清理:导致行框围绕浮动框<br />清理:强迫为浮动框留下足够的空间</h2>
        <div id="clear_div1"><img src="img_clear.png" /></div>
        <p id="clear_p1">选择1:母亲被你说服，同意你离开。获得母亲送的『治疗药膏』*1。【治疗药膏:回复50点生命值】</p>
        <p id="clear_p2">你把获得的东西小心翼翼的放入了背包，这就是你的第一笔财富。
            你的初始属性图如下:
            生命值(HP):10
            魔法值(MP):暂时禁封无法使用
            力量:0
            敏捷:0
            智力:0
            金币:0
            ——————————
            准备好了吗？一场史诗级的冒险游戏即将开始。
            【本楼为复活点1】
            阵亡无重生十字架的玩家可以选择在此复活继续进行游戏。</p>
    </div>
</body>
</html>
